<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>

<style type="text/css">
	.picbox{
		width:15rem;
		height:19.5rem;
		margin-top:3.5rem;
		position: relative;
	}
	.picture{
		width:15rem;
		height:19.5rem;
		position:absolute;
		z-index:10;
	}
	.open{
		width:4.5rem;
		height:4.5rem;
		position:absolute;
		z-index:11;
		top:11.5rem;
	}
	
	.logo{
		position:absolute;
		z-index:11;
		width:2rem;
		height:2rem;
		top:2rem;
	}
	.textBox{
		width:15rem;
		position:absolute;
		z-index:11;
		top:4.5rem;
	}
	
	.text{
		color:#FDE6B5;
		text-align:center;
	}
	body{
		background-color:#f2f2f2;
	}
	.background{
		position:absolute;
		width:100%;
		z-index:10;
	}
	.boxTop{
		position:relative;
	}
	.logo1{
		width:3.5rem;
		height:3.5rem;
		position:absolute;
		z-index:11;
		margin-top:4.5rem;
		border:1px solid #e7ebad;
		border-radius:8%;
	}
	.textBox1{
		position:absolute;
		z-index:11;
		width:100%;
		margin-top:9rem;
	}
	.text1{
		color:black;
		text-align:center;
	}
</style>
	<input type="hidden" value="${r}" id="r"/>
	<c:if test="${r ne 'x' && r ne 's'}">
		<div class="picbox">
			<img class="logo" src="<c:url value='/images/logo.png'/>"/>
			<div class="textBox">
				<p class="text" style="font-size:1rem;">普天永利</p>
				<p class="text" style="font-size:0.7rem;">发了一个红包，金额随机</p>
				<p class="text" style="margin-top:1rem;font-size:1.3rem;">恭喜发财，大吉大利</p>
			</div>
			
			<img class="picture" src="<c:url value='/images/we/redEnvelope/background.png'/>"/>
			<img class="open" src="<c:url value='/images/we/redEnvelope/open.png'/>" id="open"/>
		</div>
	</c:if>
	
	
	<c:if test="${r eq 's'}">
		<div class="boxTop">
			<img class="background" src="<c:url value='/images/we/redEnvelope/detail.jpg'/>"/>
			<img class="logo1" src="<c:url value='/images/logo.png'/>"/>
		</div>		
		<div class="textBox1">
			<p class="text1" style="font-size:0.8rem;">红包已过期</p>
		</div>		
	</c:if>
	
	<c:if test="${r eq 'x'}">
		<div style="text-align:center;">
			<img style="margin-top:6rem;text-align:center;" src="<c:url value='/images/we/redEnvelope/error.png'/>"/>
		</div>
		<p style="font-size:1rem;color:#515151;text-align:center;">服务器开小差啦，请退出重进</p>
	</c:if>

<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>	
<script type="text/javascript">
	
	$(function(){
		var phoneWidth = $(window).width();

		//动态设置红包底的margin-left的值
		var picboxWidth = $(".picbox").width();
		var left = (phoneWidth-picboxWidth)/2;
		$(".picbox").css("margin-left",left);
		
		//设置logo的位置
		var logoWidth = $(".logo").width();
		var logoLeft = picboxWidth/2 - logoWidth/2;
		$(".logo").css("left",logoLeft);
		
		
		//设置open图片的位置
		var openWidth = $(".open").width();
		var openLeft = picboxWidth/2 - openWidth/2;
		$(".open").css("left",openLeft);
		
		
		//设置logo1图片的位置
		var backgroundWidth = $(".background").width();
		
		var logoWidth1 = $(".logo1").width();
		var logoLeft1 = backgroundWidth/2 - logoWidth1/2;
		$(".logo1").css("left",logoLeft);
		
	});
	
	
	var r = $("#r").val();
	$("#open").click(function(){
		window.location.href = "<c:url value='/wechat/acc/redEnvelope/redEnvelopeDetail?r="+r+"'/>";	
	});
	
	function center(sonId,fatherId){
		
		var phoneWidth = $(window).width();
		var phoneHeight = $(window).height();
		/* 获取提示框的宽高属性 */
		var tipWidth = $("#collectionTip").css("width");	
		var tipHeight = $("#collectionTip").css("height");
		/* 去掉属性中的px单位 */

		var tipWidthNumber = tipWidth.split("px")[0];
		var tipHeightNumber = tipHeight.split("px")[0];
		/* 计算框相对于设备的left在哪 */
		var left =  phoneWidth/2 - tipWidthNumber/2; 
	}
</script>

<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>